<template>
  <div
    id="artist-albums"
    v-loading="isLoading">
    <album
      v-for="(item, index) in hotAlbums"
      :key="index"
      :album="item"
      :class="{ hidden: isLoading }"
      @songClick="songClick"
      @imgLoad="imgLoad"
      :index="index"
      :currentIndex="currentIndex"/>
  </div>
</template>

<script>
import { debounce } from 'utils'
import Album from 'components/content/album/Album.vue'

export default {
  name: 'ArtistAlbums',
  data () {
    return {
      currentIndex: [],
      imgLoadDebounce: null,
      isLoading: true
    }
  },
  components: {
    Album
  },
  props: {
    hotAlbums: {
      type: Array,
      default () {
        return []
      }
    }
  },
  created () {
    this._getDebounce()
    this.$emit('scrollUpdate')
    this.$emit('scrollUpdate')
  },
  methods: {
    // 1. 记录当前激活的歌曲
    songClick (...args) {
      // console.log(args)
      this.currentIndex = args
    },
    // 2. 图片加载完成
    imgLoad () {
      // console.log('imgLoad')
      this.imgLoadDebounce()
    },
    // 3. 获取防抖函数
    _getDebounce () {
      this.imgLoadDebounce = debounce(() => {
        this.isLoading = false
        this.scrollUpdate()
      }, 1000)
    },
    // 4. 刷新滚动条
    scrollUpdate () {
      this.$emit('scrollUpdate')
    }
  }
}
</script>

<style scoped lang="less">
#artist-albums {
  padding: 0 30px;
  min-height: 330px;
}
</style>

<style lang="less">
.el-loading-parent--relative {
  .el-loading-mask {
    background-color: #fafafa;
  }
}
</style>
